/* Import all components */
@import 'themes/default/globals/site.variables';
@import 'themes/pxt/globals/site.variables';

/* Reference import */
@import (reference) "semantic.less";

.greenscreen {
    .videoContainer {
        position: absolute !important;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width:100%;
        height:100%;
        background-color: @greenScreenColor !important;        
    }
    .videoContainer video {
        min-width:100%;
        min-height:100%;
    }
    .videoContainer video.flipx {
        transform: scaleX(-1);
    }

    #maineditor, #filelist, .blocklyToolboxDiv, svg.blocklySvg,
    .monaco-editor, .monaco-editor .margin, .monaco-editor .monaco-editor-background,
    .monacoToolboxDiv {
        background-image: none !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .monaco-editor .lines-content, .monaco-editor .view-line, .monaco-editor .view-lines {
        text-shadow: 1px 1px #000;
    }

    .blocklyMainBackground {
        fill-opacity: 0 !important;
    }

    .blocklyTreeRow, .blocklyTreeRow.blocklyTreeSelected {
        box-shadow: 1px 1px #000;
    }

    .blocklyBlockBackground {
        stroke-width: 2px;
    }

    .blocklyBlockBackground[fill="@{greenScreenBlockColor}"] {
        fill: @greenScreenGreen !important;
    }

    .pxtToolbox:not(.invertedToolbox) {
        .blocklyTreeRow:not(.blocklyTreeSelected) {
            background: white;
            .blocklyTreeIcon, .blocklyTreeLabel {
                color: black;
            }
        }
    }
}

.fullscreensim.greenscreen {
    div#boardview {
        background-image: none !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;    
    }
}
